<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{welcome.timeFix}}，{{user.username}}，{{welcome.message}}</div>
      <div></div>
    </div>
<!--    <template slot="extra">-->
<!--      <head-info class="split-right" title="项目数" content="56"/>-->
<!--      <head-info class="split-right" title="团队排名" content="8/24"/>-->
<!--      <head-info class="split-right" title="项目访问" content="2,223"/>-->
<!--    </template>-->
    <template>
      <div  style="background-color: white; padding: 30px">
        <a-descriptions title="个人信息">
          <a-descriptions-item label="账号">
            {{user.account}}
            <a-divider type="vertical" />
            <a @click="() => deployApplication()">修改密码</a>
          </a-descriptions-item>
          <a-descriptions-item label="角色">
            {{roleName(user.role)}}
          </a-descriptions-item>
          <a-descriptions-item label="所属教研室">
            {{currUser.group}}
          </a-descriptions-item>
          <a-descriptions-item label="电话号码">
            {{currUser.phone}}
          </a-descriptions-item>
          <a-descriptions-item label="邮箱">
            {{currUser.email}}
          </a-descriptions-item>
          <a-descriptions-item >
            <a @click="() => {this.$refs.infoForm.dialog = true;}">修改邮箱和电话号码</a>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </template>
    <updatePassword ref="passForm"/>
    <UserInfoForm ref="infoForm"
                  :phone="currUser.phone"
                  :email="currUser.email"/>
  </page-layout>

</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import UpdatePassword from "@/pages/dashboard/workplace/components/UpdatePasswordForm";
import UserInfoForm from "@/pages/dashboard/workplace/components/UserInfoForm";
import {mapGetters} from "vuex";
import {findUser} from "@/services/user";


const timeList = ['早上好', '上午好', '中午好', '下午好', '晚上好']

const welcomeMessages = ['休息一会儿吧', '准备吃什么呢', '活动一下吧']

export default {
  name: 'WorkPlace',
  components: { PageLayout, UpdatePassword, UserInfoForm},
  i18n: require('./i18n'),
  data () {
    return {
      loading: true,
      activities: [],
      welcome: {
        timeFix: '',
        message: ''
      },
      currUser: {
        group: '',
        phone: '',
        email: ''
      },
    }
  },
  computed: {
    ...mapGetters('account', ['user']),
  },
  methods: {
    roleName(role) {
      switch (role) {
        case 'sys_admin':
          return '系统管理员'
        case 'super_admin':
          return '校级领导'
        case 'org_admin':
          return '学院领导'
        case 'admin':
          return '教研室主任'
        case 'teacher':
          return '普通教师'
      }
    },
    deployApplication() {
      this.$refs.passForm.dialog = true;
    },
    getUserInfo() {
      findUser(this.user.account).then(res => {
        const result = res.data
        if (result.code == 200) {
          const info = result.data
          this.currUser.group = info.group
          this.currUser.phone = info.phone
          this.currUser.email = info.email
        } else {
          this.$message.error(result.message)
        }
      })
    },
    getWelcome () {
      const index = Math.floor(Math.random() * welcomeMessages.length);
      return welcomeMessages[index]
    },
    getTimeFix () {
      const time = new Date()
      const hour = time.getHours()
      return hour < 9
          ? timeList[0] : (hour <= 11 ? timeList[1] : (hour <= 13 ? timeList[2] : (hour <= 20 ? timeList[3] : timeList[4])))
    },
    initWelcomeInfo() {
      this.welcome.message = this.getWelcome()
      this.welcome.timeFix = this.getTimeFix()
    }

  },
  created() {
    this.getUserInfo()
    this.initWelcomeInfo()
  }
}
</script>

<style lang="less">
@import "index";
</style>
